<!DOCTYPE html>
<html>
	<head>
		<title>事件委托</title>
		<meta charset="utf-8">
		<style type="text/css">
			#list{font-size: 40px;line-height:60px;width:400px;margin:50px auto; }
			#list li{list-style: none;height: 60px;margin:20px;border: 2px solid red;}
		</style>
	</head>
	<body>
		
		<ul id="list">
			 <li id="L1" >第1111111个</li>
			 <li id="L2" >第2222222个</li>
			 <li id="L3" >第3333333个</li>
		</ul>

		<!-- 需求：点击那个li就让哪个li的内容打印到控制台 -->
		 <!-- 传统写法 -->
		 <script>
			/*// 1.获取节点
			var L1 = document.getElementById("L1");
			var L2 = document.getElementById("L2");
			var L3 = document.getElementById("L3");
			// 2.检测节点
			console.log(L1);
			console.log(L2);
			console.log(L3);
			// 3.加点击事件
			L1.onclick = function(){
			 	console.log(L1.innerHTML);
			}
			L2.onclick = function(){
			 	console.log(L2.innerHTML);
			}
			L3.onclick = function(){
			 	console.log(L3.innerHTML);
			}*/

			/*// 优化
			// 1.获取所有li
			var oLi = document.getElementsByTagName("li");
			// 2.for循环每个li，加点击事件
			for (var i =0; i< oLi.length; i++) {
				oLi[i].onclick = function(){
					console.log(this.innerHTML);	
				}
			}*/

			
			// 注意：此时事件加在li上 
		</script>  

		

		<!-- 事件委托的写法 -->
		<script>
			
			document.addEventListener("click",function(e){
				var oEv = e || event;
				 // var jieDian = oEv.target;//event.target指event对象的目标元素
				 // console.log(" 事件委托的写法"+oEv.target.innerHTML); 
				 console.log(oEv); 
			})

			// 注意：此时事件加在document上  document是li的祖先元素
		</script>  
	</body>
</html>